<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6.14</title>
	<script src="js/vue.js"></script>
	<style>
		#app {
			width: 480px;
			margin: 40px auto;
		}
		.row {
			display: flex;
			font-size: 18px;
			margin-bottom: 5px;
			align-items: center;
		}
		.row-label {
			font-weight: bold;
			flex: 1.5;
		}
		.row-content{
			flex: 3.5;
		}
		.wrapper {
			margin-bottom: 20px;
			padding: 20px;
			width: 480px;
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			border: 1px solid #ebeef5;
		}
	</style>
	<body>
		<div id="app">
			<user></user>
			<user>
				<template v-slot:id="slotProps">
					<div class="row-label">姓名:</div>
					<div class="row-content">{{slotProps.user.name}}</div>
				</template>
			</user>
		</div>
	</body>
	<script type="text/x-template" id="user">
		<div class="wrapper">
			<h2>个人信息</h2>
			<div class="row">
				<slot name="id" v-bind:user="user">
					<div class="row-label">ID:</div>
					<div class="row-content">{{user.id}}</div>
				</slot>
				<slot name="gender">
					<div class="row-label">性别:</div>
					<div class="row-content">{{user.gender}}</div>
				</slot>
			</div>
			<div class="row">
				<slot name="age">
					<div class="row-label">年龄:</div>
					<div class="row-content">{{user.age}}</div>
				</slot>
				<slot name="tel">
					<div class="row-label">电话:</div>
					<div class="row-content">{{user.tel}}</div>
				</slot>
			</div>
		</div>
	</script>
	<script>
		Vue.component('user',{
			template: '#user',
			data() {
				return {
					user: {
						id: '112391',
						name: '张三',
						gender: '男',
						age: 23,
						tel: '132xx421083'
					}
				}
			}
		})
		let vm = new Vue({
			el: '#app'
		})
	</script>
</html>